<template>
	<view class="order-detail">

		<view class="order-status-container">
			<!-- Order Status -->
			<view class="order-status" v-if="orderInfo.orderStatus!=='3'">
				<view class="status-icon">
					<image src="https://www.ruilongan.com/profile/upload/2025/07/22/订单_2@2x_20250722144611A107.png"
						mode="aspectFit" class="icon-image"></image>
				</view>
				<view class="status-info">
					<text class="status-text" v-if="orderInfo.orderStatus==='1'">订单确认，正在配货中</text>
					<text class="status-text" v-if="orderInfo.orderStatus==='12'" @click.stop="navigateToLogistics(orderInfo)">订单确认，正在配送中</text>
					<!-- <text class="status-text" v-if="orderInfo.orderStatus==='3'">售后</text> -->
					<text class="status-text" v-if="orderInfo.orderStatus==='-1'">已取消</text>
					<text class="status-time">{{orderInfo.orderTime}}</text>
				</view>
				<view class="status-arrow">
					<text class="iconfont icon-right" style="color: #999;"></text>
				</view>
			</view>
			
			

			<!-- Address Info -->
			<view class="address-info" v-if="orderInfo.orderStatus!=='3'">
				<view class="address-icon">
					<image
						src="https://www.ruilongan.com/profile/upload/2025/07/22/ic_20x20_stores_normal@2x_20250722144701A108.png"
						mode="aspectFit" class="icon-image"></image>
				</view>
				<view class="address-detail">
					<text class="address-text">{{orderInfo.addressVo.receiveProvince}}{{orderInfo.addressVo.receiveCity}}{{orderInfo.addressVo.receiveCounty}}{{orderInfo.addressVo.receiveUserAddress}}</text>
					<view class="address-text">{{orderInfo.addressVo.receiveUserName}}
						{{orderInfo.addressVo.receiveUserPhone}}</view>
				</view>
				<view class="address-actions" v-if="orderInfo.orderStatus==='1'">
					<button class="btn-modify-address" @click="showModifyAddressModal">修改地址</button>
				</view>
			</view>
		</view>

		<!-- 审核中状态显示 -->
		<view v-if="orderInfo.orderStatus==='3' && orderInfo.backStatus==='0'" class="audit-status-container">
			<view class="audit-status-card">
				<view class="audit-title">审核中</view>
				<view class="audit-icon-container">
					<view class="audit-clock-icon">
						<view class="clock-face">
							<view class="clock-hand hour-hand"></view>
							<view class="clock-hand minute-hand"></view>
						</view>
					</view>
				</view>
				<view class="audit-subtitle">客服正在加急审核中...</view>
			</view>
			<view class="contact-service">
				<text class="contact-text">取消退款</text>
			</view>
		</view>


		<view v-if="orderInfo.orderStatus==='3' && orderInfo.backStatus==='2'" class="audit-status-container">
			<view class="negotiation-timeline">
				<view class="timeline-title">协商取消</view>
				<view class="timeline-container">
					<!-- 第一阶段：提交申请 -->
					<view class="timeline-step completed">
						<view class="step-circle completed"></view>
						<view class="step-content">
							<view class="step-title">提交申请</view>
							<!-- <view class="step-time">04-01 11:00</view> -->
						</view>
					</view>
					
					<!-- 连接线 -->
					<view class="timeline-line"></view>
					
					<!-- 第二阶段：客服审核 -->
					<view class="timeline-step completed">
						<view class="step-circle completed"></view>
						<view class="step-content">
							<view class="step-title">客服审核</view>
							<!-- <view class="step-time">04-01 14:00</view> -->
						</view>
					</view>
					
					<!-- 连接线 -->
					<view class="timeline-line"></view>
					
					<!-- 第三阶段：协商取消 -->
					<view class="timeline-step current">
						<view class="step-circle current"></view>
						<view class="step-content">
							<view class="step-title">协商取消</view>
							<!-- <view class="step-time">04-01 14:00</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 待寄回状态显示 -->
		<view v-if="orderInfo.orderStatus==='3' && orderInfo.backStatus==='3'" class="audit-status-container">
			<view class="negotiation-timeline">
				<view class="timeline-title">待寄回</view>
				<view class="timeline-container">
					<!-- 第一阶段：提交申请 -->
					<view class="timeline-step completed">
						<view class="step-circle completed"></view>
						<view class="step-content">
							<view class="step-title">提交申请</view>
							<!-- <view class="step-time">04-01 11:00</view> -->
						</view>
					</view>
					
					<!-- 连接线 -->
					<view class="timeline-line"></view>
					
					<!-- 第二阶段：客服审核 -->
					<view class="timeline-step completed">
						<view class="step-circle completed"></view>
						<view class="step-content">
							<view class="step-title">客服审核</view>
							<!-- <view class="step-time">04-01 14:00</view> -->
						</view>
					</view>
					
					<!-- 连接线 -->
					<view class="timeline-line"></view>
					
					<!-- 第三阶段：待寄回 -->
					<view class="timeline-step current">
						<view class="step-circle current"></view>
						<view class="step-content">
							<view class="step-title">待寄回</view>
							<!-- <view class="step-time">04-01 14:00</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 商家待收货状态显示 -->
		<view v-if="orderInfo.orderStatus==='3' && orderInfo.backStatus==='4'" class="audit-status-container">
			<view class="negotiation-timeline">
				<view class="timeline-title">商家待收货</view>
				<view class="timeline-container">
					<!-- 第一阶段：提交申请 -->
					<view class="timeline-step completed">
						<view class="step-circle completed"></view>
						<view class="step-content">
							<view class="step-title">提交申请</view>
							<!-- <view class="step-time">04-01 11:00</view> -->
						</view>
					</view>
					
					<!-- 连接线 -->
					<view class="timeline-line"></view>
					
					<!-- 第二阶段：客服审核 -->
					<view class="timeline-step completed">
						<view class="step-circle completed"></view>
						<view class="step-content">
							<view class="step-title">客服审核</view>
							<!-- <view class="step-time">04-01 14:00</view> -->
						</view>
					</view>
					
					<!-- 连接线 -->
					<view class="timeline-line"></view>
					
					<!-- 第三阶段：商家待收货 -->
					<view class="timeline-step current">
						<view class="step-circle current"></view>
						<view class="step-content">
							<view class="step-title">商家待收货</view>
							<!-- <view class="step-time">04-01 14:00</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 已取消状态显示 -->
		<view v-if="orderInfo.orderStatus==='3' && orderInfo.backStatus==='-1'" class="audit-status-container">
			<view class="audit-status-card">
				<view class="audit-title">已取消</view>
			</view>
		</view>

		<!-- 已退款状态显示 -->
		<view v-if="orderInfo.orderStatus==='3' && (orderInfo.backStatus==='99'||orderInfo.backStatus==='100')" class="audit-status-container">
			<view class="refund-success-container">
				<view class="refund-success-title">退款成功</view>
				<view class="refund-amount-container">
					<view class="refund-amount">¥{{ orderInfo.payableAmount || '0.00' }}</view>
					<!-- <view class="refund-arrow">></view> -->
				</view>
				<view class="refund-timeline">
					<view class="timeline-container">
						<!-- 第一阶段：同意退款 -->
						<view class="timeline-step completed">
							<view class="step-circle completed"></view>
							<view class="step-content">
								<view class="step-title">同意退款</view>
								<!-- <view class="step-time">04-01 14:00</view> -->
							</view>
						</view>
						
						<!-- 连接线 -->
						<view class="timeline-line"></view>
						
						<!-- 第二阶段：微信处理中 -->
						<view class="timeline-step completed">
							<view class="step-circle completed"></view>
							<view class="step-content">
								<view class="step-title">处理中</view>
								<!-- <view class="step-time">04-01 14:00</view> -->
							</view>
						</view>
						
						<!-- 连接线 -->
						<view class="timeline-line"></view>
						
						<!-- 第三阶段：到账成功 -->
						<view class="timeline-step current">
							<view class="step-circle current"></view>
							<view class="step-content">
								<view class="step-title">到账成功</view>
								<!-- <view class="step-time">04-01 14:00</view> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>


		<!-- Order Product -->
		<view class="order-product">
			<view class="product-item" v-for="(item,index) in orderInfo.orderSpeciDetailVoList">
				<view class="image-container">
					<image class="product-image" :src="item.image | avatarUrlFind('1') " mode="aspectFill"></image>
					<view v-if="orderInfo.isPoints==='1'" class="points-order-tag">积分订单</view>
				</view>
				<view class="product-info">
					<view class="name-price-line">
						<text class="product-name">{{item.drugName}}</text>
						<text class="product-price">¥{{item.price}}</text>
					</view>
					<view class="product-meta">
						<text class="meta-item">商品编号：{{item.skuCode}}</text>
						<view class="meta-item specs-line">
							<text>{{item.speciName}}</text>
							<text class="product-qty">x{{item.num}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="refund-btn">
				<button class="btn-outline-green" v-if="orderInfo.isPoints!=='1'&& orderInfo.backStatus!=='99' && orderInfo.backStatus!=='0' && orderInfo.backStatus!=='3'&& orderInfo.backStatus!=='4'" @click="navigateToAfter(orderInfo)">申请退款</button>
			</view>
			<!-- Order Info -->
			<view class="order-info">
				<view class="info-item price-item price-item--payable" v-if="orderInfo.isPoints!=='1'">
					<text class="label">实付款：</text>
					<view class="value price-inline" style="margin-top: -10rpx;">
						<text class="free-shipping">已享受包邮</text>
						<text class="amount">¥{{orderInfo.payableAmount}}</text>
					</view>
				</view>
				<view class="info-item price-item" v-if="orderInfo.isPoints==='1'">
					<text class="label">积分消耗：</text>
					<text class="value price" style="font-size: 16px;">{{orderInfo.payableAmount}}</text>
				</view>
				<view class="info-item">
					<text class="label">订单编号：</text>
					<view class="value-with-copy">
						<text class="value">{{orderInfo.id}}</text>
						<text class="copy-btn" @tap="copyOrderNo(orderInfo.id)">复制</text>
					</view>
				</view>
				<view class="info-item" v-show="showMoreInfo">
					<text class="label">支付方式：</text>
					<text class="value" v-if="orderInfo.onlinePayMode.indexOf('balance')!==-1">储值支付</text>
					<text class="value" v-if="orderInfo.onlinePayMode.indexOf('wechat')!==-1">微信支付</text>
					<text class="value" v-if="orderInfo.onlinePayMode.indexOf('points')!==-1">积分支付</text>
				</view>
				<view class="info-item" v-show="showMoreInfo">
					<text class="label">下单时间：</text>
					<text class="value">{{orderInfo.orderTime}}</text>
				</view>
				<!-- <view class="info-item" v-show="showMoreInfo">
					<text class="label">交易编号：</text>
					<text class="value">245111664678646546464</text>
				</view> -->
				<view class="expand-btn" @tap="toggleMoreInfo">
					<text class="expand-text">{{showMoreInfo ? '收起' : '查看更多'}}</text>
					<text class="iconfont" :class="showMoreInfo ? 'icon-up' : 'icon-down'" style="color: #999; margin-left: 8rpx;"></text>
				</view>
			</view>
		</view>
		
		<!-- Product Recommendations -->
		<view class="recommendations">
			<view class="section-title">精选推荐</view>
			<view class="recommend-product-grid">
				<view class="recommend-product-item" v-for="(product, index) in products" :key="index"
					@tap="goGoodDetail(product)">
					<image class="recommend-product-image" :src="product.image | avatarUrlFind('1')" mode="aspectFill" />
					<view class="recommend-product-info">
						<view class="recommend-product-title">{{ product.drugName }}</view>
						<view class="recommend-product-specs">{{ product.speciName }}</view>
						<view class="recommend-price-sales-row">
							<!-- <view class="recommend-product-price">¥{{ product.salesPrice }}</view> -->
							<view class="product-price" v-if="product.goodsCategory==='P'">¥{{ product.salesPrice }}
							</view>
							<view class="product-price" v-if="product.goodsCategory==='TC'">¥{{ product.packagePrice }}
							</view>
							<view class="recommend-product-sales">已售{{ product.salesNum }}+</view>
						</view>
					</view>
				</view>
			</view>
		</view>



		<!-- Bottom Buttons -->
		<view class="bottom-buttons">
			<view class="button-group">
				<button class="btn-rebuy" type="default" @click="handleRebuy">再次购买</button>
				<button class="btn-rebuy" type="default" v-if="orderInfo.orderStatus==='3'&& orderInfo.backStatus==='4'" @click="handleLogistics">查看物流信息</button>
				<button class="btn-borrow" type="default" @click="handleUrgeShipment" v-if="orderInfo.orderStatus ==='1'">催发货</button>
				<button class="btn primary" v-if="orderInfo.orderStatus==='12'" @click.stop="confirmReceipt(orderInfo)">
					确认收货
				</button>
			</view>
		</view>

		<!-- 修改地址弹框 -->
		<AddAddressModal 
			:visible="showAddressModal" 
			:editData="currentEditOrder ? currentEditOrder.addressData : null" 
			@close="closeAddressModal" 
			@save="handleSaveOrderAddress" 
		/>

		<!-- 确认收货弹框 -->
		<view class="confirm-receipt-modal" v-if="showConfirmReceiptModal" @click="closeConfirmReceiptModal">
			<view class="modal-content padding-bottom" @click.stop>
				<!-- 关闭按钮 -->
				<view class="close-btn" @click="closeConfirmReceiptModal">×</view>
				
				<!-- 顶部图形区域 -->
				<view class="modal-header">
					<image :src="orderInfo.orderSpeciDetailVoList[0].image | avatarUrlFind('1')" class="receipt-icon"></image>
				</view>
				
				<!-- 文字内容区域 -->
				<view class="modal-body">
					<view class="main-headline">确认收到商品了吗？</view>
					<view class="description">为保障您的售后权益请确认无误后再确认收货</view>
				</view>
				
				<!-- 按钮区域 -->
				<view class="modal-footer">
					<button class="modal-btn cancel-btn" @click="closeConfirmReceiptModal">我再想想</button>
					<button class="modal-btn confirm-btn" :disabled="isConfirmingReceipt" :loading="isConfirmingReceipt" @click="handleConfirmReceipt">
						{{ isConfirmingReceipt ? '处理中...' : '确认收货' }}
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import AddAddressModal from '@/components/AddAddressModal.vue'
	import {
		getOrder,
		updateOrderAddress,
		confirmReceipt
	} from '@/api/order.js'
	import {
		queryGoodsList
	} from '@/api/shop.js'
	import {
		getInfoByDrugCode
	} from '@/api/shop.js'
	
	export default {
		components: {
			AddAddressModal
		},
		data() {
			return {
				orderId: '',
				showMoreInfo: false, // 控制订单信息展开收起
				currentCategory: 0,
				queryParams: {},
				products: [],
				orderInfo: {
					
				},
				// 修改地址相关
				showAddressModal: false,
				currentEditOrder: null,
				// 确认收货相关
				showConfirmReceiptModal: false,
				currentReceiptOrder: null,
				isConfirmingReceipt: false
			}
		},
		onLoad(options) {
			if (options.orderId) {
				this.orderId = options.orderId;
				this.getOrder();
				this.loadData();  // 加载推荐商品
			}
		},
		methods: {
			/*加载数据*/
			loadData() {
				this.products = [];
				this.queryGoodsList();
			},
			handleRefund() {
				// Handle refund logic
			},
		
			handleBorrow() {
				// Handle borrow logic
			},
			copyOrderNo(id) {
				console.log('复制订单编号:', id)
				if (!id) {
					uni.showToast({
						title: '订单编号不存在',
						icon: 'none'
					})
					return
				}
				uni.setClipboardData({
					data: String(id),
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						})
					},
					fail: () => {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						})
					}
				})
			},

			//查询订单详情
			getOrder() {
				getOrder(this.orderId).then(res => {
					this.orderInfo = res.data
				})
			},

			// 切换订单信息展开收起
			toggleMoreInfo() {
				this.showMoreInfo = !this.showMoreInfo
			},
			
			async queryGoodsList() {
				this.queryParams.pageNum = 1
				this.queryParams.pageSize = 6  // 固定显示6个推荐商品
				this.queryParams.isShow = '1'
				this.queryParams.isRecommend = '1'
				this.queryParams.shopFlag = 'normal'
				try {
					const {
						rows,
						total
					} = await queryGoodsList(this.queryParams)
					console.log('------商品列表------', rows)
					this.products = rows;  // 直接赋值，不再concat
					this.$forceUpdate();
				} catch (error) {
					console.error('加载推荐商品失败:', error)
				}
			},

			// 跳转到商品详情页
			goGoodDetail(product) {
				uni.navigateTo({
					url: `/subPackage_1/pages/goods/good-detail?id=${product.id}`
				})
			},
			
			navigateToLogistics(order) {
				uni.navigateTo({
					url: `/subPackage_1/pages/order/see_logistics?orderId=${order.id}`
				})
			},
			
			navigateToAfter(order){
				uni.navigateTo({
					url: `/subPackage_1/pages/order/apply-after?order=`+encodeURIComponent(JSON.stringify(order))
				})
			},

			handleRebuy(){
				getInfoByDrugCode(this.orderInfo.orderSpeciDetailVoList[0].drugCode).then(res=>{
					uni.navigateTo({
						url: `/subPackage_1/pages/goods/good-detail?id=`+ res.data.id
					})
				})
				
			},

			handleUrgeShipment(){
				uni.showToast({
					title: '您的发货提醒已收到！我们已优先处理您的订单，专员正在加急配货中！',
					icon: 'none',
					duration: 3000,
					mask: true
				})
			},

			handleLogistics(){
				uni.navigateTo({
					url: `/subPackage_1/pages/order/see_logistics?orderId=`+this.orderInfo.id+'T'
				})
			},

			// 显示修改地址弹框
			showModifyAddressModal() {
				this.currentEditOrder = {
					id: this.orderInfo.id
				};
				// 构建地址数据用于回显
				if (this.orderInfo.addressVo) {
					this.currentEditOrder.addressData = {
						id: this.orderInfo.addressVo.id || null,
						realName: this.orderInfo.addressVo.receiveUserName || '',
						phone: this.orderInfo.addressVo.receiveUserPhone || '',
						province: this.orderInfo.addressVo.receiveProvince || '',
						city: this.orderInfo.addressVo.receiveCity || '',
						district: this.orderInfo.addressVo.receiveCounty || '',
						detail: this.orderInfo.addressVo.receiveUserAddress || ''
					};
				}
				this.showAddressModal = true;
			},

			// 关闭修改地址弹框
			closeAddressModal() {
				this.showAddressModal = false;
				this.currentEditOrder = null;
			},

			// 保存订单地址修改
			async handleSaveOrderAddress(addressData) {
				console.log('addressData', addressData)
				if (!this.currentEditOrder) return;
				
				try {
					uni.showLoading({
						title: '保存中...',
						mask: true
					});

					// 构建更新订单的数据
					const updateData = {
						orderId: this.currentEditOrder.id,
						receiveUserName: addressData.realName,
						receiveUserPhone: addressData.phone,
						receiveProvince: addressData.province,
						receiveCity: addressData.city,
						receiveCounty: addressData.district,
						receiveUserAddress: addressData.detail,
						addressId: addressData.id || null,
						receiveProvince: addressData.province,
						receiveCity: addressData.city,
						receiveCounty: addressData.district,
					};

					const res = await updateOrderAddress(updateData);
					if (res && res.code === 200) {
						uni.showToast({
							title: '地址修改成功',
							icon: 'success'
						});
						// 刷新订单详情
						this.getOrder();
						this.closeAddressModal();
					} else {
						uni.showToast({
							title: res.msg || '修改失败，请重试',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('修改地址失败:', error);
					uni.showToast({
						title: '修改失败，请重试',
						icon: 'none'
					});
				} finally {
					uni.hideLoading();
				}
			},

			// 显示确认收货弹窗
			confirmReceipt(order) {
				this.currentReceiptOrder = order;
				this.showConfirmReceiptModal = true;
			},

			// 关闭确认收货弹窗
			closeConfirmReceiptModal() {
				this.showConfirmReceiptModal = false;
				this.currentReceiptOrder = null;
			},

			// 处理确认收货
			async handleConfirmReceipt() {
				if (!this.currentReceiptOrder || this.isConfirmingReceipt) return;
				
				this.isConfirmingReceipt = true;
				uni.showLoading({
					title: '处理中...',
					mask: true
				});
				
				try {
					const res = await confirmReceipt(this.currentReceiptOrder);
					if (res && res.code === 200) {
						console.log('确认收货成功:', res);
						uni.showToast({
							title: '确认收货成功',
							icon: 'success'
						});
						// 重新获取订单信息
						this.getOrder();
						this.closeConfirmReceiptModal();
					} else {
						uni.showToast({
							title: res.msg || '确认收货失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('确认收货失败:', error);
					uni.showToast({
						title: '确认收货失败，请重试',
						icon: 'none'
					});
				} finally {
					this.isConfirmingReceipt = false;
					uni.hideLoading();
				}
			}

		}
	}
</script>

<style>
	.order-detail {
		background-color: #f8f8f8;
		min-height: 100vh;
		padding-bottom: 120rpx; /* 为底部按钮留出空间 */
	}

	.order-status {
		background-color: #fff;
		padding: 20rpx;
		display: flex;
		align-items: center;
		margin-bottom: 2rpx;
	}

	.order-status-container {
		margin-top: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.status-info {
		flex: 1;
		margin-left: 20rpx;
	}

	.status-text {
		font-size: 28rpx;
		color: #999;
	}

	.status-time {
		font-size: 24rpx;
		color: #999;
		display: block;
		margin-top: 8rpx;
	}

	.address-info {
		background-color: #fff;
		padding: 20rpx;
		display: flex;
		align-items: flex-start;
		margin-bottom: 20rpx;
	}

	.address-detail {
		flex: 1;
		margin-left: 20rpx;
		font-size: 28rpx;
		line-height: 1.4;
		color: #999;
	}

	.address-actions {
		display: flex;
		align-items: center;
		margin-left: 20rpx;
	}

	.btn-modify-address {
		font-size: 24rpx;
		color: #00A140;
		background: #fff;
		border: 1rpx solid #00A140;
		padding: 0;
		height: 52rpx;
		line-height: 50rpx;
		border-radius: 12rpx;
		width: 120rpx;
		display: inline-block;
	}

	.order-product {
		background-color: #fff;
		padding: 20rpx;
		margin-bottom: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.product-item {
		display: flex;
		padding-bottom: 20rpx;
	}

	.image-container {
		position: relative;
		margin-right: 20rpx;
	}

	.product-image {
		width: 160rpx;
		height: 160rpx;
	}

	.points-order-tag {
		position: absolute;
		top: 0rpx;
		left: 0rpx;
		background-color: #FFCC00;
		color: #fff;
		font-size: 20rpx;
		padding: 4rpx 8rpx;
		border-bottom-right-radius: 12rpx;
		line-height: 1.2;
		z-index: 1;
	}

	.product-info {
		flex: 1;
	}

	.name-price-line {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 10rpx;
	}

	.product-name {
		font-size: 28rpx;
		line-height: 1.4;
		flex: 1;
		margin-right: 20rpx;
	}

	.product-price {
		color: #000001;
		font-size: 24rpx;
		white-space: nowrap;
	}

	.product-meta {
		font-size: 20rpx;
		color: #999;
		margin-bottom: 10rpx;
	}

	.product-meta .meta-item {
		display: block;
		line-height: 1.6;
	}

	.product-price-qty {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.product-price {
		color: #888;
		font-size: 26rpx;
	}

	.refund-btn {
		text-align: right;
		padding-top: 20rpx;
		border-bottom: 1rpx solid #eee;
		padding-right: 20rpx;
		color: #00A140;
	}

	.btn-outline-green {
		font-size: 24rpx;
		color: #00A140;
		background: #fff;
		border: 1rpx solid #00A140;
		padding: 0;
		height: 52rpx;
		line-height: 50rpx;
		border-radius: 12rpx;
		width: 200rpx;
		display: inline-block;
	}

	.order-info {
		background-color: #fff;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.info-item {
		display: flex;
		margin-bottom: 10rpx;
		font-size: 28rpx;
		line-height: 1.6;
	}

	.info-item .label {
		color: #979797;
		font-size: 24rpx;
		width: 140rpx;
		flex-shrink: 0;
	}

	.info-item .value {
		font-size: 24rpx;
		color: #979797;
	}

	.price {
		color: #ff4400;
	}

	.price-item {
		justify-content: space-between;
		align-items: center;
	}

	/* 保证“实付款”这一行左右垂直对齐 */
	.price-item--payable {
		align-items: center;
	}

	.price-item .value {
		font-weight: bold;
		color: #000;
	}

	/* 实付款右侧同一行布局 */
	.price-inline {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 8rpx;
	}

	.price-inline .free-shipping {
		font-size: 24rpx;
		color: #979797;
	}

	.price-inline .amount {
		font-size: 32rpx;
		font-weight: bold;
		color: #000;
	}

	.more-info {
		text-align: center;
		color: #666;
		font-size: 24rpx;
		padding-top: 20rpx;
		/* border-top: 1rpx solid #eee; */
	}

	.recommended {
		background-color: #fff;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
	}

	.recommend-item {
		width: 48%;
	}

	.recommend-item image {
		width: 100%;
		height: 320rpx;
		margin-bottom: 10rpx;
	}

	.recommend-name {
		font-size: 26rpx;
		line-height: 1.4;
		margin-bottom: 10rpx;
	}

	.recommend-price {
		color: #ff4400;
		font-size: 28rpx;
	}

	.recommend-sales {
		font-size: 24rpx;
		color: #999;
	}

	.bottom-buttons {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 20rpx 20rpx;
		padding-bottom: 48rpx;
		background-color: #fff;
		border-top: 1rpx solid #eee;
		box-sizing: border-box;
		z-index: 999;
	}

	.button-group {
		display: flex;
		align-items: center;
	}

	.bottom-buttons button {
		width: 180rpx;
		height: 70rpx;
		font-size: 28rpx;
		flex-shrink: 0; /* 防止按钮收缩 */
		margin-left: 15rpx; /* 按钮之间的间距 */
		border-radius: 8rpx;
	}

	.bottom-buttons button:first-child {
		margin-left: 0; /* 第一个按钮不需要左边距 */
	}

	.btn-rebuy {
		background-color: #fff;
		color: #333;
		border: 1rpx solid #ddd;
	}

	.btn-borrow {
		background-color: #fff;
		color: #333;
		border: 1rpx solid #ddd;
	}

	.status-icon {
		width: 48rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.status-icon .icon-image {
		width: 100%;
		height: 100%;
	}

	.address-icon {
		width: 48rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.address-icon .icon-image {
		width: 100%;
		height: 100%;
	}

	.product-meta .specs-line {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.product-qty {
		color: #999;
		font-size: 20rpx;
	}

	.value-with-copy {
		display: flex;
		align-items: center;
		flex: 1;
		justify-content: space-between;
	}

	.value {
		font-size: 24rpx;
		color: #979797;
	}

	.copy-btn {
		font-size: 20rpx;
		color: #999;
		padding: 4rpx 16rpx;
		border: 1rpx solid #999;
		border-radius: 8rpx;
		flex-shrink: 0;
	}

	.expand-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 0;
		border-top: 1rpx solid #eee;
		margin-top: 20rpx;
	}

	.expand-text {
		font-size: 24rpx;
		color: #999;
	}

	/* 推荐商品列表样式 */
	.recommendations {
		background-color: #fff;
		margin: 20rpx;
		border-radius: 12rpx;
		padding: 20rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		padding-left: 10rpx;
		border-left: 4rpx solid #00A140;
	}

	.recommend-product-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
	}

	.recommend-product-item {
		background: #fff;
		border-radius: 12rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.recommend-product-image {
		width: 100%;
		height: 240rpx;
		background-color: #f5f5f5;
	}

	.recommend-product-info {
		padding: 16rpx;
	}

	.recommend-product-title {
		font-size: 28rpx;
		color: #333;
		line-height: 1.4;
		margin-bottom: 8rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.recommend-product-specs {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 12rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.recommend-price-sales-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.recommend-product-price {
		font-size: 32rpx;
		color: #ff4400;
		font-weight: bold;
	}

	.recommend-product-sales {
		font-size: 22rpx;
		color: #999;
	}

	/* 确认收货弹框样式 */
	.confirm-receipt-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
		z-index: 1000;
	}

	.modal-content {
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		width: 100%;
		overflow: hidden;
		position: relative;
		transform: translateY(100%);
		animation: slideUp 0.3s ease-out forwards;
	}

	@keyframes slideUp {
		from {
			transform: translateY(100%);
		}
		to {
			transform: translateY(0);
		}
	}

	.close-btn {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		font-size: 40rpx;
		color: #999;
		z-index: 1;
	}

	.modal-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40rpx 0 20rpx;
	}

	.receipt-icon {
		width: 280rpx;
		height: 280rpx;
		margin-bottom: 20rpx;
	}

	.modal-body {
		padding: 20rpx;
		text-align: center;
		padding-top: 10rpx;
	}

	.main-headline {
		font-size: 36rpx;
		color: #000;
		margin-bottom: 10rpx;
	}

	.description {
		font-size: 24rpx;
		color: #979797;
		line-height: 1.5;
	}

	.modal-footer {
		display: flex;
		justify-content: space-around;
		padding: 20rpx;
	}

	.modal-btn {
		flex: 1;
		margin: 0 10rpx;
		padding: 20rpx 20rpx;
		font-size: 32rpx;
		border-radius: 15rpx;
		border: none;
		line-height: 1;
	}

	.modal-btn.cancel-btn {
		background-color: #f8f8f8;
		color: #4cd080;
	}

	.modal-btn.confirm-btn {
		background-color: #4cd080;
		color: #fff;
	}

	/* 审核中状态样式 */
	.audit-status-container {
		margin: 20rpx;
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.audit-status-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx 30rpx;
		text-align: center;
	}

	.audit-icon-container {
		margin: 24rpx 0;
		flex-shrink: 0;
		order: 2;
	}

	.audit-clock-icon {
		width: 80rpx;
		height: 80rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.clock-face {
		width: 60rpx;
		height: 60rpx;
		border: 4rpx solid #FF9500;
		border-radius: 50%;
		position: relative;
		background-color: #fff;
		box-shadow: 0 4rpx 12rpx rgba(255, 149, 0, 0.2);
	}

	.clock-hand {
		position: absolute;
		background-color: #FF9500;
		border-radius: 2rpx;
		transform-origin: bottom center;
	}

	.hour-hand {
		width: 3rpx;
		height: 18rpx;
		top: 12rpx;
		left: 50%;
		margin-left: -1.5rpx;
		transform: rotate(90deg);
	}

	.minute-hand {
		width: 2rpx;
		height: 24rpx;
		top: 6rpx;
		left: 50%;
		margin-left: -1rpx;
		transform: rotate(180deg);
	}

	.audit-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #000;
		margin-bottom: 0;
		order: 1;
	}

	.audit-subtitle {
		font-size: 28rpx;
		color: #333;
		line-height: 1.4;
		margin-top: 24rpx;
		order: 3;
	}

	.contact-service {
		padding: 24rpx 30rpx;
		text-align: center;
		border-top: 1rpx solid #f0f0f0;
	}

	.contact-text {
		font-size: 28rpx;
		color: #000;
		text-decoration: underline;
	}

	/* 时钟动画效果 */
	@keyframes clockTick {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}

	.minute-hand {
		animation: clockTick 2s linear infinite;
	}

	/* 协商取消时间线样式 */
	.negotiation-timeline {
		padding: 40rpx 30rpx;
		background-color: #fff;
	}

	.timeline-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #000;
		text-align: center;
		margin-bottom: 40rpx;
	}

	.timeline-container {
		position: relative;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		padding: 0 20rpx;
	}

	.timeline-step {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		z-index: 2;
		flex: 1;
	}

	.step-circle {
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		margin-bottom: 16rpx;
		position: relative;
	}

	.step-circle.completed {
		background-color: #ccc;
	}

	.step-circle.current {
		width: 32rpx;
		height: 32rpx;
		background-color: #000;
		border: 4rpx solid #fff;
		box-shadow: 0 0 0 2rpx #000;
	}

	.step-content {
		text-align: center;
	}

	.step-title {
		font-size: 28rpx;
		color: #000;
		margin-bottom: 8rpx;
		line-height: 1.2;
	}

	.step-time {
		font-size: 24rpx;
		color: #999;
		line-height: 1.2;
	}

	.timeline-line {
		position: absolute;
		top: 12rpx;
		left: 12rpx;
		right: 12rpx;
		height: 2rpx;
		background: repeating-linear-gradient(
			to right,
			#ccc 0rpx,
			#ccc 8rpx,
			transparent 8rpx,
			transparent 16rpx
		);
		z-index: 1;
	}

	/* 调整时间线步骤的间距 */
	.timeline-step:first-child {
		margin-left: 0;
	}

	.timeline-step:last-child {
		margin-right: 0;
	}

	/* 退款成功状态样式 */
	.refund-success-container {
		padding: 40rpx 30rpx;
		background-color: #fff;
		text-align: center;
	}

	.refund-success-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #000;
		margin-bottom: 30rpx;
	}

	.refund-amount-container {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 40rpx;
	}

	.refund-amount {
		font-size: 60rpx;
		font-weight: 600;
		color: #00C851;
		margin-right: 20rpx;
	}

	.refund-arrow {
		font-size: 32rpx;
		color: #ccc;
	}

	.refund-timeline {
		margin-top: 20rpx;
	}

	.refund-timeline .timeline-container {
		padding: 0 20rpx;
	}

	.refund-timeline .timeline-title {
		display: none;
	}
</style>